import React, {Component} from 'react';
import {Button, Col, Row, Spin} from 'antd';
import '../css/register.css';
import {Back} from '../components/EditComponent';
import u1977 from '../image/u1977.png';
import u1978 from '../image/u1978.png';
//import map from '../image/map.png';
import {ConfirmPay, LogisticsConfirmPay} from '../components/EditComponent';
import {config} from "../config";
import {order, wechat} from "../value";
import app from '../AppMethod';

class DeliveryOrderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {},
            loading: false
        }
    };

    render() {
        let {
            output_id, output_num, output_money, output_real_money, output_follow_name, output_follow_phone,
            output_receive_name, output_receive_mobile, output_receive_address, output_logistics_type,
            output_stop_position, output_customer_car, car_pay, logistics_name, logistics_phone, logistics_address
        } = this.state.data;
        let isPay = false;
        let payText = '';
        if (output_money == null || output_money == undefined) {
            output_money = 0;
        }
        if (output_real_money == null || output_real_money == undefined) {
            output_real_money = 0;
        }
        let money = Number(output_money) - Number(output_real_money);
        if (money === 0) {
            isPay = true;
            payText = "已付款";
        } else {
            isPay = false;
            payText = "未付款：￥" + money;
        }
        let type = output_logistics_type;
        return (
            <div className="orderListContainer">
                <div>
                    <Back title="订单详情" back="true" click={() => this.handleBack()}/>
                </div>
                <div className="orderListContent">
                    <Spin spinning={this.state.loading}>
                        <Row className="DeliveryOrderDetail">
                            <Row className="orderItem">
                                <Row style={{height: '30px', lineHeight: '30px'}}>
                                    <Col className="orderItemNumber" xs={16} md={8} lg={6}>订单号：{output_num}</Col>
                                    {
                                        type == 2 ?
                                            <Col className={"orderNotPay"} xs={8} md={8}
                                                 lg={6}>{car_pay}</Col> :
                                            <Col className={isPay ? "orderIsPay" : "orderNotPay"} xs={8} md={8}
                                                 lg={6}>{payText}</Col>
                                    }
                                </Row>
                                <Row style={{height: '30px', lineHeight: '30px'}}>
                                    <Col className="orderPerson" xs={24} md={8} lg={6}>跟单人：{output_follow_name}</Col>
                                    <Col className="orderPerson" xs={24} md={8} lg={6}>联系电话：{output_follow_phone}</Col>
                                </Row>
                                {
                                    type == 1 ? <Row style={{height: '30px', lineHeight: '30px'}}>
                                        <Col className="orderPerson" xs={12} md={8}
                                             lg={6}>客户车牌号：{output_customer_car}</Col>
                                        <Col className="orderPerson" xs={12} md={8}
                                             lg={6}>停靠位置：{output_stop_position}</Col>
                                    </Row> : ''
                                }
                            </Row>
                        </Row>
                        <Row className="DeliveryOrderDetail">
                            <Row className="orderItem" style={{height: '30px', lineHeight: '30px'}}>
                                <Col className="orderPerson" xs={24} md={8} lg={6}>收货人：{output_receive_name}</Col>
                                <Col className="orderPerson" xs={24} md={8} lg={6}>联系方式：{output_receive_mobile}</Col>
                                <Col className="orderPerson" xs={24} md={16} lg={6}>地址：{output_receive_address}</Col>
                            </Row>
                        </Row>
                        {
                            isPay == false && type != 2 ? <Row className="DeliveryOrderDetail">
                                <Row className="notPayContainer">
                                    <Row style={{textAlign: 'center', position: 'relative'}}>
                                        <img alt="null" src={u1977} className="shizhong"/>
                                        <img alt="null" src={u1978} className="shizhen"/>
                                    </Row>
                                    <Row className="payText">
                                        需付款
                                    </Row>
                                    <Row className="payMoney">
                                        ￥{money}
                                    </Row>
                                </Row>
                            </Row> : <div></div>
                        }
                    </Spin>
                </div>
                <div style={{position: 'absolute', bottom: '10px', width: '100%'}}>
                    {
                        type == 2 ?
                            <LogisticsConfirmPay handleRefresh={() => this.handleRefresh()} output_id={output_id}/> :
                            <ConfirmPay isPay={isPay} handleRefresh={() => this.handleRefresh()} output_id={output_id}
                                        money={money}/>
                    }
                </div>
            </div>
        )
    };

    componentDidMount() {
        this.handleGetSingPackage();
        this.handleGetOrderDetail();
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    }

    /**
     * 处理返回事件
     */
    handleBack() {
        this.props.history.goBack();
    }

    /**
     * 获取订单详情
     * @returns {Promise.<void>}
     */
    async handleGetOrderDetail() {
        this.setState({loading: true});
        try {
            let output_num = this.props.match.params.id;
            let result = await app.post(order.EMPLOYEE_SEARCHOUTPUT, {output_num: output_num});
            if (result.code === 1) {
                let data = result.data;
                this.setState({data, loading: false});
            } else {
                app.alert(result.msg, 'error', 3);
                this.setState({data: {}, loading: false});
            }
        } catch (e) {
            app.alert(e.msg, 'error', 3);
            this.setState({data: {}, loading: false});
        }
    };

    /**
     * 获取微信公众号授权
     * @returns {Promise.<void>}
     */
    async handleGetSingPackage() {
        let result = await app.post(wechat.GET_SIGNPACKAGE, {url: window.location.href.split("#")[0]});
        if (result.code === 1) {
            let data = result.data;
            window.wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名
                jsApiList: ['scanQRCode', 'chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表
            });
            window.wx.error(function (res) {
                app.alert(JSON.stringify(res), 'error', 3);
            });
        } else {
            app.alert(result.msg, 'error', 4);
        }
    };

    /**
     * 跳转至配送客户列表页
     */
    handleRefresh() {
        this.props.history.push(config.path + '/deliveryOrder');
    }
}

export default DeliveryOrderDetail;